<template>
  <div>
    <div class="Lottery">
      <img src="../images/border.png" alt="">
      <div style="color: #a9895d;">这是一张我们婚礼日期当天的彩票，希望它能带给你好运 ~（ps：苟富贵，勿相忘）</div>
      <div style="color: #a9895d;font-size: 12px;">17日之前都可以自己 <span class="change" @click="handleOpen">修改</span> 喜欢的号码哦
      </div>
      <div class="infoWrap">
        <a style="text-decoration: underline;" target="_blank" href="https://m.500.com/datachart/ssq/jb.html">📈走势图</a>
        <a style="text-decoration: underline;" target="_blank"
          href="https://zhuanlan.zhihu.com/p/476631507?utm_id=0">📑基础知识</a>
        <a style="text-decoration: underline;" target="_blank"
          href="https://zhuanlan.zhihu.com/p/647055940?utm_id=0">💡选号技巧</a>
        <a style="text-decoration: underline;" target="_blank"
          href="https://pic1.zhimg.com/v2-0aea76cd500faf01b036bf70ce6388cc_r.jpg">🤩中奖条件</a>
      </div>
      <div class="infoWrap">
        <a style="text-decoration: underline;" target="_blank" href="https://v.douyin.com/idSNWPkB/">🏆一等奖领奖流程</a>
        <a style="text-decoration: underline;" target="_blank" href="/jinzhou_wedding/FAQ.html">❓我有一些问题</a>
      </div>
      <div class="paper">
        <center>{{ idCode }}</center>
        <center class="title">双色球</center>
        <div style="padding-left: 40px;">
          <table border="0" class="info">
            <tbody>
              <tr>
                <td>
                  <b>彩票编号：{{ id }}</b>
                </td>
                <td>开奖日期：2023年10月17日</td>
              </tr>
              <tr>
                <td>期号：23119</td>
                <td>打印日期：2023年10月17日</td>
              </tr>
            </tbody>
          </table>
        </div>
        <center class="number" @click="handleOpen">
          <span class="index">1</span>
          <span v-for="item in redBall" :key="item" class="ball red" @click="handleRedBall(item)">
            {{ String(item).padStart(2, 0) }}
          </span>
          <span>-</span>
          <span class="ball blue">{{ String(blueBall).padStart(2, 0) }}</span>
        </center>
        <center class="codeWrap">
          <div v-for="item in 9" :key="item" class="codeRow">
            <span v-for="key in 12" :key="`${item}-${key}`" class="codeItem"
              :class="binCode[item * key] == 1 ? 'full' : ''"></span>
          </div>
        </center>
      </div>
      <img src="../images/border.png" style="transform: rotateZ(180deg);" alt="">
    </div>
    <div class="numberPicker" v-if="pickerShow">
      <center class="pickerTitle">号码选择器</center>
      <center style="font-size: 12px;">Number Picker</center>
      <div class="ballPicker">
        <span v-for="item in 31" class="ball red" @click="handleRedBall(item)"
          :class="tempRedBall.includes(item) ? 'checked' : ''" :key="item">{{
            String(item).padStart(2, 0) }}</span>
        <span class="label">{{ tempRedBall.length }} / 6</span>

      </div>
      <div class="ballPicker">
        <span v-for="item in 16" class="ball blue" :class="tempBlueBall == item ? 'checked' : ''"
          @click="tempBlueBall = item" :key="item">{{
            String(item).padStart(2, 0) }}</span>
      </div>
      <div class="footer">
        <button class="label" @click="generateLotteryNumbers">🔁 随机选择</button>
        <button @click="pickerShow = false">取消</button>
        <button :disabled="!(tempRedBall.length === 6 && tempBlueBall) || loading" @click="handleSave">{{ loading ?
          "loading" : "保存" }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

function generateRandomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function generateRedBall() {
  const redBalls = [];
  while (redBalls.length < 6) {
    const num = generateRandomNum(1, 33);
    if (!redBalls.includes(num)) {
      redBalls.push(num);
    }
  }
  return redBalls.sort((a, b) => a - b);
}

function generateBlueBall() {
  return generateRandomNum(1, 16);
}

export default {
  props: ["id"],
  data() {
    return {
      redBall: [],
      blueBall: 0,
      tempRedBall: [],
      tempBlueBall: 0,
      pickerShow: false,
      loading: false
    };
  },
  computed: {
    idCode() {
      const string = btoa([...this.redBall, this.blueBall]).toUpperCase();
      return string.replace(/(.{4})\w/g, "$1-")
    },
    binCode() {
      return this.stringToBinary(this.idCode)
    }
  },
  async mounted() {
    this.queryNum()
  },

  methods: {
    async queryNum() {
      if (!this.id) return
      const { data } = await axios.get("https://651cde1835bd4107e373316b.mockapi.io/api/v1/lotto/" + this.id)
      this.redBall = data.red || []
      this.blueBall = data.blue || 0
    },
    async handleSave() {
      this.loading = true
      await axios.put("https://651cde1835bd4107e373316b.mockapi.io/api/v1/lotto/" + this.id, {
        red: this.tempRedBall,
        blue: this.tempBlueBall,
      });
      await this.queryNum();
      this.loading = false;
      this.pickerShow = false;
      alert("修改成功了~")

      // this.redBall = this.tempRedBall;
      // this.blueBall = this.tempBlueBall;
      // this.pickerShow = false;

    },
    handleOpen() {
      this.pickerShow = true;
      this.tempRedBall = [...this.redBall]
      this.tempBlueBall = this.blueBall
    },
    handleRedBall(red) {
      if (this.tempRedBall.includes(red)) {
        this.tempRedBall = this.tempRedBall.filter(item => item != red)
      } else if (this.tempRedBall.length < 6) {
        this.tempRedBall.push(red);
        this.tempRedBall.sort()
      } else {
        alert("红球最多可选6个，可先取消不要的号码再做选择")
      }
    },
    stringToHex(str) {
      let hex = "";
      for (let i = 0; i < str.length; i++) {
        hex += str.charCodeAt(i).toString(16);
      }
      return hex;
    },
    stringToBinary(str) {
      let binary = '';
      for (let i = 0; i < str.length; i++) {
        let charCode = str.charCodeAt(i).toString(2);
        binary += charCode.padStart(8, '0');
      }
      return binary;
    },


    generateLotteryNumbers() {
      const redBalls = generateRedBall();
      const blueBall = generateBlueBall();

      this.tempRedBall = redBalls
      this.tempBlueBall = blueBall

      return { red: redBalls, blue: blueBall }
    }

  }
};
</script>

<style scoped>
.infoWrap {
  display: flex;
  gap: 6px;
  justify-content: center;
  font-size: 12px;
  margin-top: 10px;
}

.info {
  font-size: 12px;
  width: 100%;
  text-align: left;

}


.info-span {
  text-align: left;
}

.label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  color: #ed4843;
  font-weight: bold;
}

.checked::after {
  position: absolute;
  content: "✔";
  right: -1px;
  bottom: -3px;
  color: white;
  background: #35a541;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 12px;
  height: 14px;
  width: 14px;
}

.footer {
  display: flex;
  gap: 8px;
  padding: 10px;
  justify-content: flex-end;
}

.pickerTitle {
  font-size: 18px;
  font-weight: bold;
}

.red {
  background: #ed4843;
}

.blue {
  background: #3c5b9b;
}

.ballPicker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
}

.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #EFEFEF;
  color: white;
  position: relative;
}

.index {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 12px;
  box-sizing: content-box;
}

.codeWrap {
  padding: 10px 6px;
}

.codeItem {
  flex: 1;
  height: 8px;
}

.full {
  background: black;
}

.codeRow {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.Lottery,
.numberPicker {
  text-align: center;
  padding: 10px;
  padding-top: 0px;
  background-color: #fff1de;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  animation: identifier 0.5s;
  z-index: 1000;
}

@keyframes identifier {
  from {
    top: 60%;
    opacity: 0;
  }

  to {
    top: 50%;
    opacity: 1;
  }
}

.numberPicker {
  z-index: 1001;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
  padding-top: 20px;
  animation: numberPicker 0.4s;
}

@keyframes numberPicker {
  from {
    transform: translate(-50%, -50%) scale(0);
  }

  to {
    transform: translate(-50%, -50%) scale(1);

  }
}

.paper {
  border: 1px solid #f9e4c4;
  margin-top: 20px;
  padding-top: 10px;
}

.title {
  font-size: 22px;
  font-weight: bold;
}

.number {
  display: flex;
  justify-content: space-around;
  padding: 10px 8px;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
}

.change {
  text-decoration: underline;
}
</style>
